<template>
    <el-dialog :title="title" center :visible.sync="dialogVisible" width="400px" :before-close="handleClose">
        <!-- 注意：“status-icon”属性的作用是“为输入框添加表示校验结果的反馈图标”↓ -->
        <el-form :rules="rules" ref="formData" :model="formData" label-width="100px" label-position="right" style="width:300px" status-icon>
            <el-form-item label="标签名称：" prop="name">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="分类名称：" prop="categoryId">
                <el-select v-model="formData.categoryId" style="width:200px" clearable filterable>
                    <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm('formData')" size="mini">确 定</el-button>
            <el-button @click="handleClose" size="mini">取 消</el-button>
        </span>
    </el-dialog>
</template>
<script>
import api from '@/api/label'
export default {
    props:{
        title:{ // ←左边这项表示“弹出的对话框的标题”
            type:String,
            default:'',
        },
        dialogVisible:{ // ←左边这项被用来控制是否弹出对话框。取值为“true”时弹出对话框。
            type:Boolean,
            default:false,
        },
        formData:{ // ←左边这项表示“提交的表单数据”
            type:Object,
            default:{}
        },
        remoteClose:Function, // ←左边这项被用来关闭对话框
        categoryList:{ // ←注：左边这项表示“正常状态的分类列表数据”
            type:Array,
            default:[]
        }
    },
    data() {
        return {
            rules:{
                name:[{required:true,message:'请输入标签的名称',trigger:'blur'},], // ←注：左边这项表示“针对‘标签名称’的表单校验规则”
                categoryId:[{required:true,message:'请选择分类的名称',trigger:'change'},] // ←注：左边这项表示“针对‘分类ID’的表单校验规则”
            }
        }
    },
    methods: {
        // 提交表单数据
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 校验通过，提交表单数据
                    this.submitData()
                } else {
                    this.$message({
                        message:'提交表单失败（表单验证未通过）',
                        type:'error',
                        center:true
                    })
                    console.log('提交表单失败（表单验证未通过）');
                    return false;
                }
            });
        },
        // 调用接口提交数据
        async submitData(){ // ←注意：左边这项是“ES6”中的新语法，当加上“async”和“await”时，该方法返回当前响应的数据。
            let response = null
            if (this.formData.id) {
                // 编辑
                response = await api.update(this.formData)
            } else {
                // 新增
                response = await api.addLabel(this.formData)
            }
            if (response.code === 20000) {
                this.$message({
                        message:'提交表单成功',
                        type:'success',
                        center:true
                    })
                    // 关闭对话框
                    this.handleClose()
            } else {
                    this.$message({
                        message:'提交表单失败（网络原因）',
                        type:'error',
                        center:true
                    })
                    console.log('提交表单失败（网络原因）');
                    return false;
                }
        },
        // 1.“handleClose”表示关闭对话框；2.“done”虽然是一个被传入的对象，但在此处既可以接收也可以不接收（因为该参数在此处没什么用）↓
        handleClose(done){
            this.$refs['formData'].resetFields()
            // this.dialogVisible = false ←左边这种写法是错误的，因为“dialogVisible”在这个组件中是使用“props”选项接收的从其父组件中被传递过来的属性，所以在作为子组件的这个组件中不能直接修改其值。
            this.remoteClose() // ←左边这项表示通过触发父组件中的名为“remoteClose”的事件函数来关闭对话框
        },
    },
}
</script>
<style lang="scss" scoped>
    div{::v-deep.el-form-item__error{white-space: pre;top: 28px;left: 16px;}}
</style>